<template>
	<view class="" style="background-image: linear-gradient(to bottom, #dceaff, #ffffff);">
		<!-- Added gradient here -->
		<view style="padding: 0 30rpx;">
			<view class="sd_box">
				<view class="sd_box_list">
					<view class="ft_ft_box">
						<view style="width: 28rpx; height: 30rpx;">
							<image src="@/static/image/user.png" mode=""></image>
						</view>
						<view class="ft_ft_info">
							<view class="">
								真实姓名
							</view>
						</view>
					</view>
					<view class="rt_ip">
						<input type="text" placeholder="请输入姓名" @input="sub()" v-model="users" />
					</view>
				</view>
				<view class="sd_box_list">
					<view class="ft_ft_box">
						<view class="ft_ft_lt" style="width: 32rpx; height: 24rpx;">
							<image src="@/static/image/sfz.png" mode=""></image>
						</view>
						<view class="ft_ft_info">
							<view class="">
								身份证号
							</view>
						</view>
					</view>
					<view class="rt_ip">
						<input type="text" placeholder="请输入身份证" v-model="stuID" />
					</view>
				</view>
				<view class="sd_box_list">
					<view class="ft_ft_box">
						<view style="width: 28rpx; height: 30rpx;">
							<image src="@/static/image/xy.png" mode=""></image>
						</view>
						<view class="ft_ft_info">
							<view>
								电子协议
							</view>
						</view>
					</view>
					<view class="rt_ip rt_tit" style="width: 45%; display: flex;">
						<van-checkbox :value="togs" shape="square" @change="togclick"></van-checkbox>勾选表示同意协议
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="idstatus!=1">
			<button style="background-color: #3c91ff; color: white; border-radius: 50rpx; margin-top: 80rpx;"
				@click="sub">去认证</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		postrealName
	} from "@/api/index.js"
	import { onLoad } from '@dcloudio/uni-app';
	import {
		getapplyOrderData,
		getRealNameI,
		} from "@/package/api/update.js"
	
	const users = ref("")
	const stuID = ref("")
	const idstatus=ref("")
	const togs = ref(false)
	const togclick = (e) => {
		togs.value = e.detail;
	}
	
	onLoad(()=>{
		getInit()
		
	})
	
	/*查询出实名认证信息*/
	const getInit= async (event) =>{
		let res = await getRealNameI();
		
		users.value = res.data.name
		stuID.value = res.data.idcard		
		idstatus.value=res.data.idstatus	
		togs.value=true
	}
	
	// 验证身份证号码的正则表达式
	const idCardRegex = /^(^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$)|(^[1-9]\d{5}\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}$)$/;
	const sub = (e) => {
		if (!users.value) {
			uni.showToast({
				title: '请输入姓名',
				icon: 'none'
			});
			return;
		}
		if (!stuID.value) {
			uni.showToast({
				title: '请输入身份证号',
				icon: 'none'
			});
			return;
		}
		if (!idCardRegex.test(stuID.value)) {
			uni.showToast({
				title: '身份证号格式不正确',
				icon: 'none'
			});
			return;
		}
		if (!togs.value) {
			uni.showToast({
				title: '请勾选电子协议',
				icon: 'none'
			});
			return;
		}
		const data = {
			name: users.value,
			idcard: stuID.value,
		}
		postrealName(data).then(res => {
			if (res.code == 1) {				
				uni.showToast({
					title:res.msg,
					icon:"none",
					success() {
						setTimeout(function() {
							uni.navigateBack()
						}, 3500)
					}
				})
			} else {
				uni.showToast({
					title:res.msg,
					icon:"none"
				})
			}
		})
	};

</script>

<style scoped>
	::v-deep .input-placeholder {
		color: #3c91ff;
	}
	
	::v-deep .van-cell__value {
		color: #3c91ff;
	}
	.ft_ft_box {
		display: flex;
		align-items: center;

	}

	.ft_ft_info {
		margin-left: 20rpx;
	}

	.sd_box {
		background-color: white;
		border-radius: 20rpx;
	}

	.sd_box_list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #e8f2ff;
		padding: 20rpx;
	}

	.rt_ip {
		text-align: end;
		color: black;
	}

	.rt_tit {
		color: #3c91ff;
	}

	/* 设置 input 的 placeholder 颜色 */
	input::placeholder {
		color: red;
	}
	input{
		text-align: right;
	}
	.upload_box {
		height: 350rpx;
		margin: 30rpx;
		border: 1rpx solid #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 25rpx;
		box-sizing: border-box;
	}
</style>